<script setup lang='ts'>
// reactive 是让引用类型的数据具备响应式，在使用的时候不需要 .value
// getCurrentInstance 是用来获取 $forceUpdate() 用的
// ref 也可以让引用类型的数据具备响应式
import { ref, reactive, getCurrentInstance } from "vue";


// const data = ref({
//     count: 10,
//     msg: '你好世界'
// })


// const { ctx } = getCurrentInstance()
interface iData {
    count: number;
    msg: string
}

const data:iData = reactive({
    count: 10,
    msg: '你好世界'
})

function add() {
    data.count++
    // console.log(ctx);
    // 强制重新加载组件
    // ctx.$forceUpdate()
    
}
</script>
<template>
    <div>
        <button @click='add'>点击加 1</button>
        <h1> {{ data.count }} -- {{data.msg}} </h1>
    </div>
</template>
<style>
    
</style>